<template>
	<view class="login" :style="'height:'+screeHeight+'rpx;'">
		<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar" plain="true">
			<image class="avatar" :src="avatarUrl"></image>
			<view class="getAvatar">点击获取头像</view>
		</button>
		<view class="nickName">
			<view class="nickName-text">昵称：</view>
			<input type="nickname" class="weui-input" placeholder-class="placeholderColor" :value="nickName"
				placeholder="请输入昵称" @input="getNickName" />
		</view>
		<view class="illustrate">
			<view>申请获取以下权限</view>
			<view class="illustrate-text">为了区分不同客户信息将获得您的公开信息（昵称、头像、地区等）</view>
		</view>
		<view class="empower" @click="loginin">授权登录</view>
		<view class="unempower" @click="cancelEmpower">暂不授权</view>
	</view>
</template>

<script>
	import util from '@/component/commen/api/util.js'; //引入封装的请求
	export default {
		data() {
			return {
				avatarUrl: "https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0",
				screeHeight: 0, //当前屏幕高度
				nickName: "", //昵称
				userinfo: {}, //用户信息
				userPhone: uni.getStorageSync('userPhone')
			};
		},
		mounted() {
			this.getsystemInfo()
			// console.log(this.screeHeight)
		},
		methods: {
			getNickName(e) { //监听输入框获取昵称
				// console.log(e)
				this.nickName = e.detail.value
			},
			onChooseAvatar(e) { //获取用户头像
				console.log(e)
				// this.avatarUrl = e.detail.avatarUrl
				let name = "file"
				util.uploadImg(e.detail.avatarUrl,name).then(res=>{
					// console.log("获取线上图片地址：",res)
					console.log("图片的线上地址：",res)
					 this.avatarUrl = res
				})
			},
			getsystemInfo() { //获取当前屏幕信息
				// 设备系统信息
				let sysInfo = uni.getSystemInfoSync()
				// 机型适配比例系数
				let scaleFactor = 750 / sysInfo.windowWidth
				// 当前机型屏幕高度
				this.screeHeight = sysInfo.windowHeight * scaleFactor

			},
			loginin() {
				let _this = this;
				if (this.avatarUrl ==
					"https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0"
				) {
					return uni.showToast({
						title: "请选择头像",
						icon: "none"
					});
				}
				if (this.nickName == "") {
					return uni.showToast({
						title: "请输入昵称",
						icon: "none"
					});
				}
				// if (this.userPhone == "") {
				// 	return uni.showToast({
				// 		title: "选择手机号",
				// 		icon: "none"
				// 	});
				// }
				uni.login({
					desc: "用于完善会员资料",
					success(res) {
						console.log(res);
						var params = {
							do: "openid",
							c: "auth",
							a: "session",
							code: res.code
						}
						// 发送第一个请求获取 openid 和 session_key
						util.requestWithSign(params).then(res => {
							console.log("获取openid:", res)
							uni.setStorageSync("openid", res.data.openid);
							uni.setStorageSync("session_key", res.data.sessionid);
							_this.getUId();
						})
					}
				});
			},
			getUId() {
				let params = {
					do: 'user',
					op: 'register',
					pid: '',
					state: "we7sid-" + uni.getStorageSync("session_key"),
					openid: uni.getStorageSync("openid"),
					avatar: this.avatarUrl,
					nickname: this.nickName,
					unionid: ''
				};
				// 发起带签名的请求
				util.requestWithSign(params)
					.then(res => {
						console.log("Response:", res);
						// 处理返回结果
						if (res.errno == 0) {
							uni.setStorageSync("uid", res.data)

							// var paramupdate = {
							// 	do:"settelphone",
							// 	op:"resiger",
							// 	pid:"",
							// 	openid:uni.getStorageSync("openid"),
							// 	uid:uni.getStorageSync("uid"),
							// 	telphone:this.userPhone,
							// }
							// util.requestWithSign(paramupdate).then(res=>{
							// 	console.log("添加手机号：",res)
							// 	uni.redirectTo({
							// 		url: "/pages/my/my"
							// 	})
							// })
							uni.redirectTo({
								url: "/pages/my/my"
							})
						}
					})
					.catch(err => {
						console.error("Error:", err);
						// 处理错误
					});
			},
			cancelEmpower() { //点击暂不授权
				uni.navigateBack()
			},
		},
	}
</script>

<style lang="scss" scoped>
	.login {
		// border: 1px solid #000;
		// height: 100%;
		font-size: 29rpx;
		padding: 0 40rpx;
		background: #fff;

		.avatar-wrapper {
			padding-top: 40rpx;
			border: 0;
			background: #fff;

			.avatar {
				width: 200rpx;
				height: 200rpx;
				border-radius: 50%;
			}

			.getAvatar {
				font-size: 28rpx;
				width: 100%;
				text-align: center;
			}
		}

		.nickName {
			margin-top: 20rpx;
			padding: 20rpx 0;
			border-bottom: 2rpx solid #eee;
			border-top: 2rpx solid #eee;
			display: flex;
			align-items: center;

			.nickName-text {
				width: 20%;
				// border: 1px solid #f00;
			}

			.weui-input {
				// text-align: center;
				// border: 1px solid #000;
			}
		}

		.userPhone {
			margin-top: 20rpx;
			padding: 20rpx 0;
			border: 0;
			border-bottom: 2rpx solid #eee;
			display: flex;
			align-items: center;
			background: #fff;
			font-size: 29rpx;

			.textPhone {
				text-align: left;
				// font-size: 29rpx;
				width: 20%;
				// color:#b0b0b0;
			}

			.authorization {

				// border: 1px solid #f00;
				// font-size: 29rpx;
				border: 0;
				text-align: left;
			}

			.nullphone {
				color: #b0b0b0;
			}

			// .phoneNum{

			// }
		}

		.illustrate {
			margin-top: 40rpx;
			font-size: 29rpx;

			.illustrate-text {
				font-size: 29rpx;
				color: #b8b8b8;
				margin-top: 16rpx;
			}
		}

		.empower {
			background: #02bb8e;
			border-radius: 36rpx;
			margin-top: 40rpx;
			// height: 8vh;
			padding: 22rpx;
			// border: 1px solid #f00;
			text-align: center;
			color: #fff;
			// line-height: 8vh;
			font-size: 36rpx;
		}

		.unempower {
			width: 100%;
			text-align: center;
			font-size: 36rpx;
			color: #00063b;
			margin-top: 17rpx;
		}
	}
</style>